<template>
	<view class="content mainpadding" v-if="pageShow" style="padding-bottom: 150rpx;">
		<!-- <view class="textcenter flexcenter xiaohei titletext bold mainpadding" style="background-color: #ffb800;">
			帳戶點數：<text v-text="allMoney"></text></view> -->
		<view class="xiaohong bold flexcenter margin_top5 titletext" style="font-size: 70rpx;" v-if="call_no!='暫時寫死'">
			<text class="titletext margin_right2">訂單編號 </text>#{{call_no}}
		</view>
		<view class="text_g margin_top5 color_ling text">訂單金額</view>
		<view class="price margin_top1">
			<text class="text">$</text>
			<text>{{allPayprice}}</text>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="text_g color_san pdl" style="font-weight: bold;">優惠方式</view>
			<!-- 優惠券 -->
			<view class=" border2 flexbetween margin_top" @click="selectyhqFn()">
				<view class="text_a color_san">優惠券</view>
				<view class="flexleft">
					<view class="text_a color_theme margin_right2" v-show="rall_id">抵扣{{yh_money}}</view>
					<view class="text_a color_six margin_right2" v-show="!rall_id">請選擇</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<!-- 免運券 -->
			<view class="" v-show="waisongddmyShow && order_type==0">
				<view class=" border2 flexbetween margin_top" @click="selectmyqFn()">
					<view class="text_a color_san">免運券</view>
					<view class="flexleft">
						<view class="text_a color_theme margin_right2" v-show="ship_id">{{ship_name}}</view>
						<view class="text_a color_six margin_right2" v-show="!ship_id">請選擇</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
			<!-- 儲值抵扣 -->
			<view class=" border2 margin_top" style="width: 100%;" @click="chuzhichecked=!chuzhichecked">
				<view class="flexbetween">
					<view class="text_a color_san">儲值餘額：<text class="hong_text titletext bold">${{cz_price || 0}}</text>
					</view>
					<view :class="chuzhichecked?'xuanzhongs':'wiexuanzhongs'"></view>
				</view>
				<view class="margin_top totalPrice" v-if="cz_price!=0 && chuzhichecked">
					<text class="text_a color_san">儲值抵扣：</text><text
						class="hong_text">-${{Number(cz_price)-Number(paymoney)-Number(yh_money)>=0?Number(paymoney)-Number(yh_money):Number(cz_price)}}</text>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff" v-show="allPayprice!=0">
			<view class="text_g color_san pdl" style="font-weight: bold;">支付方式</view>
			<view class="flexbetween margin_top" @click="type=1">
				<view class="flexleft">
					<image class="imgBox margin_right2" src="/static/images/index/payment1.png" mode=""></image>
					<view class="text_a color_san">點數支付</view>
					<view class="margin_left2 text_a color_san">${{allMoney}}</view>
				</view>
				<view class="flexright">
					<view class="chuzhi" style="margin-right: 50rpx;" @click.stop="jumpurl('/pages_mine/recharge')">儲值點數
					</view>
					<view :class="type==1?'xuanzhongs':'wiexuanzhongs'"></view>
				</view>
			</view>
			<view class="flexbetween margin_top" v-if="mult==1 && dy_open" @click="type=2">
				<view class="flexleft">
					<image class="imgBox margin_right3" src="/static/images/index/payment5.png" mode=""></image>
					<view class="text_a color_san">多元支付</view>
				</view>
				<view :class="type==2?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
			<!-- 現金支付 -->
			<template v-if="order_type!=2 && order_type!=3">
				<view class="flexbetween margin_top"
					v-if="(xj_open && issm==1 && order_type==0) || (xj_open && order_type!=1 && order_type!=0)"
					@click="type=3">
					<view class="flexleft">
						<image class="imgBox margin_right3" src="/static/images/index/payment1.png" mode=""></image>
						<view class="text_a color_san">現金支付</view>
					</view>
					<view :class="type==3?'xuanzhongs':'wiexuanzhongs'"></view>
				</view>
			</template>
			<!-- linepay支付 -->
			<view class="flexbetween  margin_top" v-if="shopInfo.linepay_status==1" @click="type=5">
				<image src="https://useradmin.opos.tw/uploads/20241014/877a9ba7a98f75b90a9d49f53f15a858.webp"
					class="radius" style="width: 40%;" mode="widthFix"></image>
				<view :class="type==5?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
			<!-- 街口支付 -->
			<view class="flexbetween  margin_top" v-if="shopInfo.jkpay_status==1" @click="type=6">
				<image src="https://useradmin.opos.tw/uploads/20241014/c74d97b01eae257e44aa9d5bade97baf.webp"
					class="radius" style="width: 40%;" mode="widthFix"></image>
				<view :class="type==6?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
		</view>
		<view class="flexcenter margin_top" @click="isAgree=isAgree?false:true">
			<view class="wiexuanzhongs margin_right2" v-show="!isAgree"></view>
			<view class="xuanzhongs margin_right2" v-show="isAgree"></view>
			<view>
				<text class="text_a xiaohei">支付即代表同意</text>
				<text class="text_a color_yellow"
					@click.stop="jumpurl('/pages_mine/userAgreement')">《雙方權益及退貨退款說明》</text>
			</view>
		</view>
		<view class="footer flexbetween">
			<view class="footerButton" style="width: 40%;" @click="payment">
				立即支付
			</view>
			<view class="footerButton" style="width: 40%;" @click="hongpage">
				返回首頁
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, // 1點數支付,2多元，3现金
				mult: 1, //是否显示多元支付 0不显示 1显示
				isGoole: 1, //是否显示apple支付喝goole支付 0显示 1显示
				id: "", //訂單id
				paymoney: 0,
				shop_user_price: 0,
				order_type: 0, //0普通商品訂單支付，1商品訂單繼續支付，3呼叫訂單付定金，2呼叫訂單付尾款，,3呼叫訂單付定金,4預約訂單結帳,5跑腿訂單支付,6住宿訂單支付
				shop_id: "",
				allMoney: "",
				shoptable_id: "",
				xj_open: 0, //現金支付是否展示0不展示1展示，
				dy_open: 0, //多元支付是否展示0不展示1展示，
				issm: 0, //是否为店铺扫码进入/桌台码扫码进入
				pageShow: false,
				shopInfo: {},
				// 優惠券
				rall_id: "",
				yh_money: "",
				// 儲值金額
				cz_price: "",
				chuzhichecked: false,
				// 免運券
				ship_id: "",
				ship_name: "",
				waisongddmyShow: false, //如果是外送訂單免運券展示
				isAgree: true
			}
		},
		onLoad(options) {
			uni.$on("selectyhq", data => {
				this.yh_money = data.yh_money
				this.rall_id = data.rall_ids
			})
			uni.$on("selectmyq", data => {
				this.ship_id = data.ship_id
				this.ship_name = data.name
			})
			if (options.isGoole) {
				this.isGoole = options.isGoole
			}
			if (options.msg) {
				let data = JSON.parse(decodeURIComponent(options.msg))
				this.id = data.id
				this.call_no = data.call_no
				if (data.dyzf) {
					this.mult = 0
				}
				if (data.order_type) {
					this.order_type = data.order_type
				} else {
					this.order_type = 0
				}
				if (this.order_type == 0 || this.order_type == 1) {
					//商品订單获取支付金额信息
					this.payOrderInfo();
				} else {
					this.paymoney = data.paymoney;
				}
				if (data.shop_id) {
					this.shop_id = data.shop_id
					this.getShopDetail()
				}
				if (data.issm) {
					this.issm = data.issm
				}
				if (data.shoptable_id) {
					this.shoptable_id = data.shoptable_id
				}
			}
			this.getlist()
			this.getShopuserprice()
			this.pageShow = true
		},
		onUnload() {
			uni.$off("selectyhq")
			uni.$off("selectmyq")
		},
		computed: {
			allPayprice() {
				let price = 0
				if (this.chuzhichecked) {
					price = Number(this.paymoney) - Number(this.yh_money) - (Number(this.cz_price) - Number(this
						.paymoney) - Number(
						this.yh_money) >= 0 ? Number(this.paymoney) - Number(this.yh_money) : Number(this
						.cz_price))
				} else {
					price = Number(this.paymoney) - Number(this.yh_money)
				}
				if (price == 0) {
					this.type = 1
				}
				if (price < 0) {
					this.type = 1
					price = 0
				}
				return price
			}
		},
		methods: {
			selectmyqFn() {
				uni.navigateTo({
					url: "/pages_mine/minemyq?type=1&allprice=" + this.paymoney + "&shop_id=" + this.shop_id
				})
			},
			selectyhqFn() {
				uni.navigateTo({
					url: "/pages_mine/mineCoupon?type=1&allprice=" + this.paymoney + "&shop_id=" + this.shop_id
				})
			},
			getShopuserprice() { //用戶在當前店家的儲值金額
				this.http.request("/api/shop/ShopUserInfo", 'POST', {
					shop_id: this.shop_id
				}).then(res => {
					this.cz_price = res.data.shopUser.money
				})
			},
			payOrderInfo() { //商品訂單詳情支付金額
				this.http.request("/api/Ordergoods/deailOrdergoods", 'POST', {
					id: this.id
				}).then(res => {
					this.paymoney = res.data.zhuimoney;
					if (res.data.type == 0) { //當前訂單為外送訂單
						this.waisongddmyShow = true
					}
				})
			},
			getShopDetail() {
				let url = "/api/shop/shop"
				this.http.request(url, 'POST', {
					shop_id: this.shop_id
				}).then(res => {
					this.xj_open = res.data.xj_open
					this.dy_open = res.data.dy_open
					this.shopInfo = res.data
				})
			},
			getlist() { //獲取個人信息
				let _this = this
				let url = "/api/member/zcgl"
				this.http.request(url, 'POST', {}).then(res => {
					this.allMoney = res.data.money
				})
			},
			async payment() { //立即支付
				if (!this.isAgree) {
					this.http.toast("請先同意雙方權益説明！")
					return false
				}
				if (this.type == 3) {
					this.http.modal('提示', '請到櫃臺結帳', false, (resp) => {
						if (resp) {
							uni.reLaunch({
								url: "/pages/order/order"
							})
						}
					})
				}
				let data = {
					paytype: this
						.type, // 1=余额支付 2多元支付3现金支付,4=信用卡,5=linepay支付线上,6=街口支付线上,7=街口支付线下,8=linepay支付线下,9=linepay二维码,10=街口支付二维码,11=全支付扫码
					id: this.id, //訂單id
				}
				if (this.type == 1 || this.type == 2 || this.type == 3) {
					this.$set(data, "ly", 1)
				}
				if (this.type == 5 || this.type == 6) {
					this.$set(data, "ly", 2)
				}
				let url = ""
				if (this.order_type == 0 || this.order_type == 1) { //普通商品訂單支付，商品訂單繼續支付
					url = "/api/ordergoods/paymentOrder"
					data = {
						paytype: this.type, // 1點數支付
						id: this.id, //訂單編號
						shop_id: this.shop_id,
						ship_id: this.ship_id,
						paymoney: this.allPayprice,
						shop_user_price: this.chuzhichecked ? (Number(this.cz_price) - Number(this.paymoney) -
							Number(this.yh_money) >= 0 ? Number(this.paymoney) - Number(this.yh_money) :
							Number(this.cz_price)) : 0,
						rall_id: this.rall_id,
						yh_money: this.yh_money,
					}
				}
				if (this.order_type == 2) { //呼叫訂單付尾款
					url = "/api/ordercall/paymentOrder"
				}
				if (this.order_type == 3) { //呼叫訂單付定金
					url = "/api/ordercall/paymentOrder"
				}
				if((this.order_type == 2 || this.order_type == 3) && this.type==2){
					this.http.modal('提示', '支付完成之後請向店家告知 編號 並出示付款頁面！', false, (resp) => {
						if (resp) {
							uni.redirectTo({
								url: "/pages_index/duoyuanzf?type=3&shop_id=" + this.shop_id +
									"&id=" + this.id
							})
						}
					})
					return false
				}
				if (this.order_type == 4) { //預約訂單結帳
					url = "/api/ordermake/jzOrderMake"
					data = {
						paytype: this.type, // 1點數支付
						order_make_id: this.id, //訂單id
					}
				}
				if (this.order_type == 5) { //跑腿訂單支付
					url = "/api/pay/run_pay"
				}
				if (this.order_type == 6) { //住宿訂單支付
					url = "/api/hotel/payment"
					data = {
						pay_type: this.type, // 1點數支付
						pay_order_no: this.id, //訂單編號
						shop_id: this.shop_id,
					}
				}
				let res = await this.http.request(url, 'POST', data)
				if (res.code == 1) {
					if (this.type == 2) { //多元支付
						this.http.modal('提示', '支付完成之後請向店家告知 編號 並出示付款頁面！', false, (resp) => {
							if (resp) {
								uni.redirectTo({
									url: "/pages_index/duoyuanzf?type=1&shop_id=" + this.shop_id +
										"&id=" + this.id
								})
							}
						})
						return false
					}
					if ((this.type == 5 || this.type == 6) && (this.order_type == 2 || this.order_type ==
							3)) { //呼叫訂單
						if (this.type == 5) {
							location.href = res.data.web
							// linePay 回調跳轉頁面/pages_index/linezhifuhj
						}
						if (this.type == 6) {
							location.href = res.data.payment_url
						}
						return false
					}
					if ((this.type == 5 || this.type == 6) && (this.order_type == 0 || this.order_type ==
							1)) { //呼叫訂單
						if (this.type == 5) {
							location.href = res.data.web
							// linePay 回調跳轉頁面/pages_index/linezhifuhj
						}
						if (this.type == 6) {
							location.href = res.data.payment_url
						}
						return false
					}
					if (this.type != 3) {
						this.http.toast("支付成功！")
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/order/order"
							})
						}, 500)
					}
				} else {
					this.http.toast(res.msg)
				}
			},
			xdzfpay(val) {
				if (val == 1) { //全支付
					console.log(this.shopInfo.allpay_client_type);
					if (this.shopInfo.allpay_client_type == 1) { //1二維碼支付，2綫上支付
						location.href = this.shopInfo.allpay_client_url;
					}
				}
				if (val == 2) { //icash支付
					if (this.shopInfo.icash_client_type == 1) {
						location.href = this.shopInfo.icash_client_url;
					}
				}
				if (val == 3) { //悠悠支付
					if (this.shopInfo.yypay_client_type == 1) {
						location.href = this.shopInfo.yypay_client_url;
					}
				}
			},
			hongpage() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.price {
		font-size: 72rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #000000;
		text-align: center;

		.text {
			font-size: 40rpx;
		}
	}

	.imgBox {
		width: 42rpx;
		height: 42rpx;
	}

	.chuzhi {
		background-color: #f56c6c;
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
	}

	.pdl {
		padding-bottom: 10rpx;
	}
</style>